<template>
	<div class="fillOrder train">
		<!---->
		<div class="fillOrder_header">
			<!--头部-->
			<trainHeader name="订单填写" :btn="btnName" @btnClick="rightBtnEvent"></trainHeader>
			<!--车次详情-->
			<trainlistdetails :msg="msg" :departureDate="departureDate" v-if="isShowFlag"></trainlistdetails>
			<!--座位信息-->
			<div class="fillOrder_default_price fillOrder_flex" v-if="isShowFlag">
				{{seatMessage.seatName || seatMessage.cn}} ￥{{seatMessage.lowestPrice}}
			</div>
		</div>
		<div class="fillOrder_header_zhan"></div>
		<template v-if="isShowFlag">
			<!--订单填写部分-->
			<div class="fillOrder_all">
				<!--12306-->
				<div class="fillOrder_number">
					<img src="http://h5.kpcx179.com/wximages/train/12306@2x.png " alt="" />
					<div class="fillOrder_number_logOut fillOrder_number_logIn" v-if="logInMessage.isLogin == '2'">
						<!--登录状态-->
						<div>{{logInMessage.accountName}}</div>
						<p>12306账号已登录，正享受极速购票模式</p>
					</div>
					<div class="fillOrder_number_logOut" v-else>
						<!--登出状态-->
						<div>登录12306享极速出票</div>
						<router-link to="/index/train/trainLogin">
							<img src="http://h5.kpcx179.com/wximages/train/yijiandenglu@2x.png" alt="" />
						</router-link>
					</div>
				</div>
				<!--乘客信息-->
				<div class="fillOrder_passenger">
					<div class="fillOrder_passenger_header top_radius" :class="{bottom_radius:!passengerList.length}">
						<div @click="addPassenger">添加 / 修改乘车人</div>
						<div class="fillOrder_passenger_border"></div>
						<div @click="addChildren">添加儿童票<span>(用成人证件)</span></div>
					</div>
					<!--乘客列表-->
					<div class="fillOrder_passenger_content" v-show="passengerList.length">
						<div v-for="item,key in passengerList" class="fillOrder_passenger_box">
							<div class="fillOrder_passenger_del" @click="delPassenger(key)">
								<div></div>
							</div>
							<div class="fillOrder_passenger_message">
								<div class="fillOrder_passenger_name">
									<span>{{item.name}}</span>
									<!--<em v-if="item.passengerType == 1">成人</em>-->
									<em v-if="item.passengerType == 2" class="child">儿童票</em>
									<em v-if="item.passengerType == 3">学生票</em>
								</div>
								<div>
									<span v-if="item.kpcxcertnO[0].certTypeNum == 1">
									身份证：
								</span>
									<span v-else-if="item.kpcxcertnO[0].certTypeNum == 2">
									护照：
								</span>
									<span v-else-if="item.kpcxcertnO[0].certTypeNum == 8">
									台胞证：
								</span>
									<span v-else-if="item.kpcxcertnO[0].certTypeNum == 4">
									港澳通行证：
								</span>
									<span>
									{{item.kpcxcertnO[0].certNo | getNum}}
								</span>
								</div>
							</div>
						</div>
					</div>
					<!--联系电话-->
					<div class="fillOrder_passenger_phone bottom_radius" :class="{top_radius:!passengerList.length}">
						<span>联系电话</span>
						<input type="number" v-model="phone" placeholder="用于接收确认短信" @focus="getPhoneFocus" @blur="getPhoneBlur"/>
						<div class="fillOrder_passenger_phone_pic">
							<img src="http://h5.kpcx179.com/wximages/train/tongxunlu@2x.png" alt="" />
						</div>
					</div>
				</div>
				<div class="fillOrder_zhan"></div>
				<!--备选车次-->
				<div class="fillOrder_message top_radius" v-if="ticketType">
					<div class="fillOrder_message_name">备选车次</div>
					<div class="fillOrder_message_content font_spill" style="color: #777;" @click="alternativeTrain">
						<span v-if="alternative.train.length">{{alternative.train.join("、")}}</span>
						<span v-else>请选择备选车次</span>
					</div>
					<img src="http://h5.kpcx179.com/wximages/train/gengduo@2x.png" alt="" />
				</div>
				<!--备选坐席-->
				<div class="fillOrder_message" v-if="ticketType">
					<div class="fillOrder_message_name">备选坐席</div>
					<div class="fillOrder_message_content font_spill" style="color: #777;" @click="alternativeSeat">
						<span v-if="alternative.seat.choose.length">{{alternative.seat.choose | getSeat}}</span>
						<span v-else>请选择备选坐席</span>
					</div>
					<img src="http://h5.kpcx179.com/wximages/train/gengduo@2x.png" alt="" />
				</div>
				<!--备选日期-->
				<div class="fillOrder_message bottom_radius" :class="{'top_radius' : isBlackOnFlag}" v-if="ticketType">
					<div class="fillOrder_message_name">备选日期</div>
					<div class="fillOrder_message_content font_spill" style="color: #777;" @click="alternativeDate">
						<span v-if="alternative.date.length">{{alternative.date | getDate}}</span>
						<span v-else>请选择备选日期</span>
					</div>
					<img src="http://h5.kpcx179.com/wximages/train/gengduo@2x.png" alt="" />
				</div>
				<!--抢票提示-->
				<div class="fillOrder_robTicket_tip" v-if="ticketType">
					我们会为您抢票至<span>发车前3小时</span>，若抢票失败<span>全额退款</span>至您支付账户
				</div>
				<!--抢票拖拽-->
				<div class="fillOrder_message top_radius" :class="{'bottom_radius' : !robTicketSpeedUpShow}" v-if="ticketType" @click="robTicketSpeedUpShow = !robTicketSpeedUpShow">
					<div class="fillOrder_message_name">抢票加速</div>
					<div class="fillOrder_message_content font_spill" style="color: #777;">
						<span>{{robTicketSpeedUpObj[robTicketSpeedUpIndex].speed}}</span><span>抢票{{robTicketSpeedUpObj[robTicketSpeedUpIndex].price}}元/份</span>
					</div>
					<img src="http://h5.kpcx179.com/wximages/train/gengduo@2x.png" alt="" :class="{active:robTicketSpeedUpShow}" />
				</div>
				<div class="fillOrder_robTicketSpeedUp bottom_radius" v-show="robTicketSpeedUpShow" v-if="ticketType" @touchmove.prevent>
					<div class="fillOrder_robTicketSpeedUp_change">
						<div>
							<div class="fillOrder_robTicketSpeedUp_content">
								<div v-for="item,key in robTicketSpeedUpObj" :class="{active:robTicketSpeedUpIndex==key,start:!key,end:key==4,left:key==3,right:key==1}" @click="changeRobTicketSpeed(key)">
									<span>{{item.speed}}</span>
									<p></p>
								</div>
							</div>
							<div class="fillOrder_robTicketSpeedUp_line" id="robTicketSpeedUpLine">
								<div class="fillOrder_robTicketSpeedUp_line_child" :style="{width:robTicketSpeedUpIndex*25 + '%'}"></div>
								<div :style="{left:robTicketSpeedUpIndex*24.5 + '%'}" @touchstart="robTicketTouchStart" @touchmove="robTicketTouchMove" class="fillOrder_robTicketSpeedUp_pic">
									<img src="http://h5.kpcx179.com/wximages/jindutiao@2x.png" alt="" />
								</div>
							</div>
						</div>
						<div class="fillOrder_robTicketSpeedUp_message">
							<div class="fillOrder_robTicketSpeedUp_message_content">
								<div>加速包<span>{{robTicketSpeedUpObj[robTicketSpeedUpIndex].price}}</span>个</div>
								<span>成功率{{robTicketSpeedUpObj[robTicketSpeedUpIndex].successRate}}</span>
							</div>
							<div>
								{{robTicketSpeedUpObj[robTicketSpeedUpIndex].speed}}<span>{{robTicketSpeedUpObj[robTicketSpeedUpIndex].price}}</span>元/人
							</div>
						</div>
					</div>
					<div class="fillOrder_robTicketSpeedUp_tip">
						<div>注：</div>
						<div>
							下订单后，通过<span>邀请好友助力可以增加加速包个数</span>，从而提升抢票成功率，最高可以增加到50个，享受光速抢票加速服务
						</div>
					</div>
				</div>
				<div class="fillOrder_zhan" v-if="ticketType"></div>
				<!--红包-->
				<div class="fillOrder_message top_radius" :class="{bottom_radius:!redEnvelope.switchFlag}">
					<div class="fillOrder_message_name">红包</div>
					<div class="fillOrder_message_content" @click="couponSkip">
						<span v-if="redEnvelope.allMoney">共{{redEnvelope.allMoney}}元，可用<em>{{redEnvelope.canUseMoney}}</em>元</span>
						<span v-else>暂无可用红包</span>
					</div>
					<!--红包开关-->
					<div v-if="redEnvelope.allMoney" class="fillOrder_message_switch" :class="{active:redEnvelope.switchFlag}" @click="changeRedPacketSwitch">
						<div :class="{fillOrder_message_switch_left:!redEnvelope.switchFlag}"></div>
					</div>
				</div>
				<!--红包输入框-->
				<div class="fillOrder_message bottom_radius fillOrder_message_redEnvelope" v-show="redEnvelope.switchFlag">
					<div class="fillOrder_message_redEnvelope_zhan"></div>
					<div class="fillOrder_message_redEnvelope_message">
						<span>使用</span>
						<input type="number" v-model="redEnvelope.useMoney" @input="changeRedEnvelopeUseMoney" placeholder="请输入金额"/>
						<span>元</span>
						<div class="fillOrder_message_redEnvelope_tip" @click="maskFlag = 5">
							<img src="http://h5.kpcx179.com/wximages/train/tishi@2x.png"/>
						</div>
					</div>
				</div>
				<div class="fillOrder_zhan"></div>
				<!--优惠券(黑号不展示优惠券)-->
				<div class="fillOrder_message top_radius" v-if="!isBlackOnFlag" :class="{'bottom_radius' : !insuranceFlag}">
					<div class="fillOrder_message_name">优惠券</div>
					<div class="fillOrder_message_content" @click="couponSkip">
						<span v-if="coupon.name">{{coupon.name}} ￥{{coupon.price | fix}}</span>
						<span v-else-if="coupon.list.length" style="color: #ff3000;">{{coupon.canUserNum}}个优惠券可用</span>
						<span v-else>暂无可用优惠券</span>
					</div>
					<img src="http://h5.kpcx179.com/wximages/train/gengduo@2x.png" alt="" />
				</div>
				<!--行程保险-->
				<div class="fillOrder_message bottom_radius" :class="{'top_radius' : isBlackOnFlag}" v-if="insuranceFlag && !ticketType">
					<div class="fillOrder_message_name">行程保险</div>
					<div class="fillOrder_message_content" style="color: #777;" @click="insuranceSkip">
						<span v-if="insurance.name">{{insurance.name}} ￥{{insurance.highestPrice | fix}}/人</span>
						<span v-else>请选择行程保险</span>
					</div>
					<img src="http://h5.kpcx179.com/wximages/train/gengduo@2x.png" alt="" />
				</div>
				<!--截止日期-->
				<div class="fillOrder_zhan" v-if="ticketType"></div>
				<div class="fillOrder_message bottom_radius top_radius" v-if="ticketType">
					<div class="fillOrder_message_name">截止日期</div>
					<div class="fillOrder_message_content" style="color: #777;">
						<span>{{maxTime | changeMaxTime}}</span><span class="fillOrder_message_content_tip">抢票至发车前3个小时</span>
					</div>
				</div>
				<!--选座服务-->
				<div class="fillOrder_message fillOrder_chooseSeat" v-if="chooseSeatFlag && !ticketType">
					<div class="fillOrder_message_name">选座服务</div>
					<div class="fillOrder_message_content" style="color: #777;" @click="chooseSeatMask">
						<span v-if="chooseSeatClass.seat && chooseSeatClass.seat.length">
						{{chooseSeatClass.seat.join("、")}}
					</span>
						<span v-else>请选择坐席</span>
					</div>
					<img src="http://h5.kpcx179.com/wximages/train/gengduo@2x.png" alt="" />
				</div>
				<!--出行服务-->
				<div class="fillOrder_message fillOrder_chooseSeat" v-if="!ticketType">
					<div class="fillOrder_message_name">出行服务</div>
					<div class="fillOrder_message_content" style="color: #777;" @click="eventServer">
						<span>{{server.content}} ￥{{server.money}}/人</span>
					</div>
					<img src="http://h5.kpcx179.com/wximages/train/gengduo@2x.png" alt="" />
				</div>
				<!--红包返现提示-->
				<div class="fillOrder_student_tip">
					<div>返现红包规则</div>
					<p>
						1.乘车人是注册本人才能获得返现红包，其他乘客不能获得返现红包；
					</p>
					<p>
						2.乘车人中包含儿童票并且属于乘车人是注册本人的儿童，才能获得返现红包；
					</p>
					<p>
						3.乘车人中包含非注册本人的乘车人不能获得返现红包；
					</p>
				</div>
				<!--学生票提示-->
				<div class="fillOrder_student_tip" v-if="ticketType">
					抢票暂不支持学生票，如选择学生乘客类型将以成人票价出票，实际价格以抢票成功后票价为准，抢票成功后，1-3个工作日内将退还差价至您的账号
				</div>
				<div class="fillOrder_student_tip" v-else v-show="!studentTicketFlag">
					学生票乘车时间限为每年的暑假6月1日-9月30日、寒假12月1日-3月31日。目前不在学生票可售卖时间段内，将按照成人票出票，您需要支付成人票价，在取票机通过身份证取票。
				</div>
			</div>
			<!--蒙层-->
			<kpmask v-show="maskFlag" @mask='maskClick'></kpmask>
			<!--选座弹窗-->
			<div class="fillOrder_chooseSeatMask" v-if="maskFlag == 1" @click="chooseSeat(true)" @touchmove.prevent>
				<div class="fillOrder_chooseSeatMask_box" @click.stop="">
					<div class="fillOrder_chooseSeatMask_title">
						<span v-if="chooseSeatClass.num == passengerList.length">已选好，请提交</span>
						<span v-else>可以选座了，请选择{{passengerList.length - chooseSeatClass.num}}个座位</span>
					</div>
					<div class="fillOrder_chooseSeatMask_row">
						<span>窗户</span>
						<div v-if="chooseSeatClass.seatClassFirstRow.A" @click.stop="chooseSeatChange('A',0)">
							<img src="../../../assets/train/seat/weixuan_a@2x.png" alt="" v-show="chooseSeatClass.seatClassFirstRow.A == 1" />
							<img src="../../../assets/train/seat/yixuan_a@2x.png" alt="" v-show="chooseSeatClass.seatClassFirstRow.A == 2" />
						</div>
						<div v-if="chooseSeatClass.seatClassFirstRow.B" @click.stop="chooseSeatChange('B',0)">
							<img src="../../../assets/train/seat/weixuan_b@2x.png" alt="" v-show="chooseSeatClass.seatClassFirstRow.B == 1" />
							<img src="../../../assets/train/seat/yixuan_b@2x.png" alt="" v-show="chooseSeatClass.seatClassFirstRow.B == 2" />
						</div>
						<div v-if="chooseSeatClass.seatClassFirstRow.C" @click.stop="chooseSeatChange('C',0)">
							<img src="../../../assets/train/seat/weixuan_c@2x.png" alt="" v-show="chooseSeatClass.seatClassFirstRow.C == 1" />
							<img src="../../../assets/train/seat/yixuan_c@2x.png" alt="" v-show="chooseSeatClass.seatClassFirstRow.C == 2" />
						</div>
						<span>过道</span>
						<div v-if="chooseSeatClass.seatClassFirstRow.D" @click.stop="chooseSeatChange('D',0)">
							<img src="../../../assets/train/seat/weixuan_d@2x.png" alt="" v-show="chooseSeatClass.seatClassFirstRow.D == 1" />
							<img src="../../../assets/train/seat/yixuan_d@2x.png" alt="" v-show="chooseSeatClass.seatClassFirstRow.D == 2" />
						</div>
						<div v-if="chooseSeatClass.seatClassFirstRow.F" @click.stop="chooseSeatChange('F',0)">
							<img src="../../../assets/train/seat/weixuan_f@2x.png" alt="" v-show="chooseSeatClass.seatClassFirstRow.F == 1" />
							<img src="../../../assets/train/seat/yixuan_f@2x.png" alt="" v-show="chooseSeatClass.seatClassFirstRow.F == 2" />
						</div>
						<span>窗户</span>
					</div>
					<!--第二排-->
					<div class="fillOrder_chooseSeatMask_row" v-if="passengerList.length > 1">
						<span>窗户</span>
						<div v-if="chooseSeatClass.seatClassSecondRow.A" @click.stop="chooseSeatChange('A',1)">
							<img src="../../../assets/train/seat/weixuan_a@2x.png" alt="" v-show="chooseSeatClass.seatClassSecondRow.A == 1" />
							<img src="../../../assets/train/seat/yixuan_a@2x.png" alt="" v-show="chooseSeatClass.seatClassSecondRow.A == 2" />
						</div>
						<div v-if="chooseSeatClass.seatClassSecondRow.B" @click.stop="chooseSeatChange('B',1)">
							<img src="../../../assets/train/seat/weixuan_b@2x.png" alt="" v-show="chooseSeatClass.seatClassSecondRow.B == 1" />
							<img src="../../../assets/train/seat/yixuan_b@2x.png" alt="" v-show="chooseSeatClass.seatClassSecondRow.B == 2" />
						</div>
						<div v-if="chooseSeatClass.seatClassSecondRow.C" @click.stop="chooseSeatChange('C',1)">
							<img src="../../../assets/train/seat/weixuan_c@2x.png" alt="" v-show="chooseSeatClass.seatClassSecondRow.C == 1" />
							<img src="../../../assets/train/seat/yixuan_c@2x.png" alt="" v-show="chooseSeatClass.seatClassSecondRow.C == 2" />
						</div>
						<span>过道</span>
						<div v-if="chooseSeatClass.seatClassSecondRow.D" @click.stop="chooseSeatChange('D',1)">
							<img src="../../../assets/train/seat/weixuan_d@2x.png" alt="" v-show="chooseSeatClass.seatClassSecondRow.D == 1" />
							<img src="../../../assets/train/seat/yixuan_d@2x.png" alt="" v-show="chooseSeatClass.seatClassSecondRow.D == 2" />
						</div>
						<div v-if="chooseSeatClass.seatClassSecondRow.F" @click.stop="chooseSeatChange('F',1)">
							<img src="../../../assets/train/seat/weixuan_f@2x.png" alt="" v-show="chooseSeatClass.seatClassSecondRow.F == 1" />
							<img src="../../../assets/train/seat/yixuan_f@2x.png" alt="" v-show="chooseSeatClass.seatClassSecondRow.F == 2" />
						</div>
						<span>窗户</span>
					</div>
					<!--提示-->
					<div class="fillOrder_chooseSeatMask_tip">选座后如果票额不足，系统将随机为您申请座席</div>
					<!--按钮-->
					<div class="fillOrder_chooseSeatMask_btn" @click="chooseSeat(false)">
						<span v-if="chooseSeatClass.num == passengerList.length">确定</span>
						<span v-else>不选座直接进行下一步</span>
					</div>
				</div>
			</div>
			<!--底部价格-->
			<div class="fillOrder_bottom" @touchmove.prevent :class="{zIndex:maskFlag == 2}" v-show="isBottomShowFlag">
				<div class="fillOrder_bottom_priceMessage" v-if="maskFlag == 2">
					<div>
						<span>总费用</span>
						<span class="fillOrder_bottom_price">￥{{priceObj.total}}</span>
					</div>
					<div>
						<span>车票</span>
						<span class="fillOrder_bottom_price">￥{{priceObj.ticket}}</span>
					</div>
					<div v-if="ticketType">
						<span>抢票套餐</span>
						<span class="fillOrder_bottom_price">￥{{robTicketPrice * passengerList.length}}</span>
					</div>
					<div>
						<span>优惠券</span>
						<span class="fillOrder_bottom_price">￥{{coupon.price}}</span>
					</div>
					<div v-if="insuranceFlag && !ticketType">
						<span>行程保险</span>
						<span class="fillOrder_bottom_price">￥{{insurance.highestPrice * passengerList.length}}</span>
					</div>
					<div v-if="!ticketType">
						<span>出行套餐</span>
						<span class="fillOrder_bottom_price">￥{{server.money * passengerList.length}}</span>
					</div>
				</div>
				<!--卧铺提示-->
				<div class="fillOrder_bottom_tip" v-if="seatMessage.seatName=='硬卧' || seatMessage.seatName=='软卧' || seatMessage.seatName=='高级软卧'" v-show="!maskFlag">
					<span v-if="ticketType">
					卧铺按上铺票价显示，您需要支付价格最高的坐席费用，抢票成功后，1-3个工作日内将退还差价至您的账户~
				</span>
					<span v-else>
					卧铺按上铺票价显示，占座成功后支付实际价格
				</span>
				</div>
				<div class="fillOrder_bottom_footer">
					<div>
						<span class="fillOrder_bottom_priceAll">订单总额：</span>
						<span class="fillOrder_bottom_price">￥{{priceObj.result}}元</span>
					</div>
					<div class="fillOrder_bottom_box">
						<div class="fillOrder_bottom_all" @click="priceDetail">
							<span>明细</span>
							<img src="http://h5.kpcx179.com/wximages/train/zhankai-xiangshang@2x.png" alt="" v-show="maskFlag == 2" />
							<img src="http://h5.kpcx179.com/wximages/train/zhankai@2x.png" alt="" v-show="maskFlag != 2" />
						</div>
						<div class="fillOrder_bottom_btn" @click="submit">
							<span v-if="ticketType">马上开抢</span>
							<span v-else>提交订单</span>
							<span class="fillOrder_bottom_btn_returnMoney" v-if="HCCashBackFlag" v-show="priceObj.retrunMoney > 3.6">返{{priceObj.retrunMoney | returnMoney}}</span>
						</div>
					</div>
				</div>
			</div>
			<!--出票弹窗-->
			<trainGetSeat v-if="maskFlag == 3" :msg="msg" :passengerList="passengerList" :orderNum="orderNum"></trainGetSeat>
			<!--抢票备选坐席-->
			<div class="fillOrder_alternativeSeat" v-if="maskFlag == 4">
				<!--按钮栏-->
				<div class="fillOrder_alternativeSeat_header">
					<span @click="alternativeSeatCancel">取消</span>
					<div>请选择坐席</div>
					<span @click="alternativeSeatSubmit">确定</span>
				</div>
				<!--提示-->
				<div class="fillOrder_alternativeSeat_tip">
					<div>
						多选几个座席，成功率会更高哦！
					</div>
					<div>
						多个座席暂收最高票价，出票后退还差额
					</div>
					<div>
						暂收【{{alternative.seat.maxPriceSeat.trainNo}}{{alternative.seat.maxPriceSeat.seatName}}】的价格，根据抢票结果退还差额！
					</div>
				</div>
				<!--坐席-->
				<div class="fillOrder_alternativeSeat_content">
					<div :class="{active:item.flag}" v-for="item,key in alternative.seat.all" @click="alternativeSeatEvent(item)">
						<span>{{item.seatName}}   ￥{{item.lowestPrice}}</span>
						<img src="http://h5.kpcx179.com/wximages/train/kuang-xuanzhong@2x.png" alt="" v-show="item.flag" />
						<img src="http://h5.kpcx179.com/wximages/train/kuang-weixuan@2x.png" alt="" v-show="!item.flag" />
					</div>
				</div>
			</div>
			<div class="fillOrder_redEnvelope_tip" v-show="maskFlag == 5" @click="closeRedEnvelopeTip">
				<div @click.stop>
					<div class="fillOrder_redEnvelope_title">红包使用规则</div>
					<div class="fillOrder_redEnvelope_text">
						<div class="">使用条件：</div>
						<div v-for="item in redEnvelope.tip">
							{{item}}
						</div>
						<div class="fillOrder_redEnvelope_btn">
							<div  @click.stop="closeRedEnvelopeTip">我知道了</div>
						</div>
					</div>
				</div>
			</div>
			<!--保险弹窗-->
			<div class="fillOrder_insurance" v-if="maskFlag == 6">
				<div class="fillOrder_insurance_box">
					<div class="fillOrder_insurance_pic">
						<img src="../../../assets/train/baoxian@2x.png"/>
					</div>
					<div class="fillOrder_insurance_tip">
						<div class="fillOrder_insurance_title">
							为了您出行更<span>安心</span>，建议购买
						</div>
						<div class="fillOrder_insurance_title">
							{{insurance.name}}
						</div>
						<div>
							￥{{insurance.highestPrice}}/人
						</div>
					</div>
					<div class="fillOrder_insurance_btn">
						<div @click="recommendInsurance(false)">
							取消
						</div>
						<div class="active" @click="recommendInsurance(true)">
							确认
						</div>
					</div>
				</div>
			</div>
		</template>
	</div>
</template>
<style scoped>
	.fillOrder_flex {
		display: flex;
	}
	
	.fillOrder {
		padding-bottom: 200px;
	}
	
	.fillOrder_header_zhan {
		height: 380px;
	}
	
	.fillOrder_header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #F4F5F9;
		z-index: 50;
	}
	/*票价*/
	
	.fillOrder_default_price {
		box-sizing: border-box;
		padding: 0 13px;
		align-items: center;
		justify-content: flex-start;
		border-radius: 0 0 10px 10px;
		font-size: 28px;
		color: #333333;
		height: 90px;
		background: #fff;
		margin: 0 17px;
	}
	/*订单部分*/
	
	.fillOrder_all {
		padding: 0 21px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	/*12306*/
	
	.fillOrder_number {
		width: 100%;
		height: 98px;
		background-color: #ffffff;
		border-radius: 10px;
		margin-top: 17px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0 14px;
		box-sizing: border-box;
	}
	
	.fillOrder_number>img {
		width: 26px;
		height: 32px;
		margin-right: 18px;
	}
	
	.fillOrder_number_logOut {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		font-size: 28px;
		color: #444444;
	}
	
	.fillOrder_number_logOut.fillOrder_number_logIn {
		flex-direction: column;
		padding: 18px 0;
		align-items: flex-start;
	}
	
	.fillOrder_number_logIn>p {
		font-size: 24px;
		color: #8a8a8a;
		margin-top: 8px;
	}
	
	.fillOrder_number_logOut img {
		width: 124px;
		height: 46px;
	}
	/*乘客信息*/
	
	.fillOrder_passenger {
		width: 100%;
		margin-top: 15px;
		border-radius: 10px;
	}
	
	.fillOrder_passenger_header {
		height: 90px;
		display: flex;
		align-items: center;
		padding: 22px 0px;
		justify-content: space-around;
		box-sizing: border-box;
		font-size: 28px;
		color: #333333;
		margin-bottom: 15px;
		background: #fff;
		border-bottom: 2px solid #f4f5f9;
	}
	
	.fillOrder_passenger_header>div {
		width: 42%;
		text-align: center;
	}
	
	.fillOrder_passenger_header>.fillOrder_passenger_border {
		width: 2px;
		height: 45px;
		background-color: #f4f5f9;
	}
	
	.fillOrder_passenger_header span {
		font-size: 24px;
		color: #a8a8a8;
	}
	
	.fillOrder_passenger_content {
		padding: 0 24px;
		background: #fff;
		margin-top: -15px;
	}
	
	.fillOrder_passenger_box {
		height: 130px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 2px solid #f4f5f9;
		box-sizing: border-box;
	}
	
	.fillOrder_passenger_box {
		border: 0;
	}
	
	.fillOrder_passenger_del {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f31419;
		margin-right: 30px;
	}
	
	.fillOrder_passenger_del>div {
		width: 18px;
		height: 3px;
		background: #fff;
	}
	
	.fillOrder_passenger_name {
		font-size: 32px;
		color: #333;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.fillOrder_passenger_name>em {
		font-size: 24px;
		color: #fb6523;
		width: 94px;
		height: 36px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ffc2a7;
		font-weight: 700;
		margin-left: 20px;
	}
	
	.fillOrder_passenger_name>em.child {
		color: #ffffff;
		background-color: #f7c413;
	}
	
	.fillOrder_passenger_message {
		height: 100px;
		box-sizing: border-box;
		/*padding: 15px 0;*/
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		font-size: 28px;
		color: #a8a8a8;
	}
	
	.fillOrder_passenger_phone {
		display: flex;
		box-sizing: border-box;
		padding: 0 24px;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		height: 75px;
		border-top: 2px solid #f4f5f9;
	}
	
	.fillOrder_passenger_phone>span {
		font-size: 28px;
		color: #333333;
		font-weight: 700;
		/*margin-right: 56px;*/
		width: 25%;
	}
	
	.fillOrder_passenger_phone>input {
		border: 0;
		outline: none;
		flex: 1;
		font-size: 28px;
	}
	
	.fillOrder_passenger_phone_pic {
		width: 46px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.fillOrder_passenger_phone_pic>img {
		width: 100%;
		height: 45px;
	}
	
	.fillOrder_zhan {
		height: 15px;
		width: 100%;
	}
	/*优惠券等公共样式*/
	
	.fillOrder_message {
		height: 88px;
		display: flex;
		width: 100%;
		padding: 0 22px;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		background: #fff;
	}
	
	.fillOrder_message_name {
		width: 25%;
		display: flex;
		justify-content: flex-start;
		font-size: 28px;
		color: #333333;
		font-weight: 700;
	}
	
	.fillOrder_message_content {
		flex: 1;
		font-size: 26px;
	}
	
	.fillOrder_message_content > span > em {
		color: #fb6523;
	}
	
	.fillOrder_message > img {
		width: 21px;
		height: 38px;
		transition: all 0.5s;
	}
	
	.fillOrder_message_switch {
		width: 75px;
		height: 38px;
		position: relative;
		top: 0;
		left: 0;
		border-radius: 19px;
		background-color: #939393;
		border:2px solid #939393;
		transition: all 0.5s;
	}
	
	.fillOrder_message_switch.active {
		border:2px solid #3bc3c2;
		background-color: #3bc3c2;
	}
	
	.fillOrder_message_switch > div {
		height: 38px;
		width: 38px;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: 0;
		left: 37px;
		transition: all 0.5s;
	}
	
	.fillOrder_message_switch > .fillOrder_message_switch_left {
		left: 0;
	}
	
	.fillOrder_message.fillOrder_message_redEnvelope {
		border-top: 2px solid #f4f5f9;
	}
	
	.fillOrder_message_redEnvelope > .fillOrder_message_redEnvelope_zhan {
		width: 25%;
	}
	
	.fillOrder_message_redEnvelope > .fillOrder_message_redEnvelope_message {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28px;
		color: #444444;
		flex: 1;
	}
	
	.fillOrder_message_redEnvelope > .fillOrder_message_redEnvelope_message > input {
		color: #010101;
		width: 138px;
		height: 50px;
		text-align: center;
		margin: 0 10px;
		border: 2px solid #e9e9e9;
		background: #fff;
		outline: none;
	}
	
	.fillOrder_message_redEnvelope > .fillOrder_message_redEnvelope_message > .fillOrder_message_redEnvelope_tip {
		width: 34px;
		height: 34px;
		margin-left: 20px;
	}
	
	.fillOrder_message_redEnvelope > .fillOrder_message_redEnvelope_message > .fillOrder_message_redEnvelope_tip > img {
		width: 100%;
		height: 100%;
	}
	
	.fillOrder_message>img.active {
		transform: rotate(90deg);
	}
	
	.top_radius {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	
	.bottom_radius {
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}
	/*选座*/
	
	.fillOrder_chooseSeat {
		margin-top: 15px;
		border-radius: 10px;
	}
	/*选座弹窗*/
	
	.fillOrder_chooseSeatMask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 350;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.fillOrder_chooseSeatMask_box {
		width: 620px;
		background: #fff;
		border-radius: 10px;
		padding: 45px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
	
	.fillOrder_chooseSeatMask_title {
		margin-bottom: 20px;
		font-size: 30px;
		color: #333333;
	}
	
	.fillOrder_chooseSeatMask_row {
		display: flex;
		width: 100%;
		padding: 0 27px;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		height: 100px;
	}
	
	.fillOrder_chooseSeatMask_row>span {
		font-size: 24px;
		color: #c8c8c8;
	}
	
	.fillOrder_chooseSeatMask_row>div>img {
		width: 71px;
		height: 59px;
	}
	
	.fillOrder_chooseSeatMask_tip {
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26px;
		color: #fb6523;
		background: #ffd0bb;
		margin-top: 20px;
	}
	
	.fillOrder_chooseSeatMask_btn {
		width: 550px;
		height: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 34px;
		color: #fff;
		border-radius: 15px;
		background-color: #3bc3c2;
		margin-top: 57px;
	}
	/*学生票提示*/
	
	.fillOrder_student_tip {
		font-size: 24px;
		color: #a8a8a8;
		margin-top: 42px;
		line-height: 35px;
		padding: 0 10px;
	}
	
	.fillOrder_student_tip > div {
		margin-bottom: 17px;
	}
	
	.fillOrder_student_tip > p {
		margin-top: 5px;
	}
	/*底部价格*/
	
	.fillOrder_bottom {
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 299;
	}
	
	.fillOrder_bottom.zIndex {
		z-index: 350;
	}
	
	.fillOrder_bottom_priceMessage>div {
		padding: 0 52px;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88px;
		font-size: 26px;
	}
	
	.fillOrder_bottom_price {
		color: rgb(251, 101, 35);
	}
	
	.fillOrder_bottom_footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30px;
		box-sizing: border-box;
		width: 100%;
		font-size: 26px;
		height: 98px;
	}
	
	.fillOrder_bottom_footer>div {
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 32px;
	}
	
	.fillOrder_bottom_priceAll {
		font-size: 24px;
	}
	
	.fillOrder_bottom_box>.fillOrder_bottom_all {
		font-size: 26px;
		color: #555555;
		margin-right: 15px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.fillOrder_bottom_box>.fillOrder_bottom_all>img {
		width: 25px;
		height: 12px;
		margin-left: 14px;
	}
	
	.fillOrder_bottom_box>.fillOrder_bottom_btn {
		background-color: #3bc3c2;
		border-radius: 10px;
		font-size: 32px;
		color: #fafafa;
		padding: 23px 15px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.fillOrder_bottom_box > .fillOrder_bottom_btn > .fillOrder_bottom_btn_returnMoney {
		font-size: 20px;
		padding: 5px 10px;
		background: #FB6523;
		border-radius: 16px;
		margin-left: 10px;
	}
	/*卧铺提示*/
	
	.fillOrder_bottom_tip {
		background: #fcfded;
		font-size: 26px;
		color: #ec7150;
		padding: 10px 50px;
	}
	/*抢票备选选座*/
	
	.fillOrder_alternativeSeat {
		position: fixed;
		background: #fff;
		left: 0;
		bottom: 0;
		z-index: 350;
		right: 0;
		border-radius: 15px 15px 0px 0px;
	}
	
	.fillOrder_alternativeSeat_header {
		height: 92px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 50px;
		box-sizing: border-box;
		font-size: 32px;
		color: #3bc3c2;
	}
	
	.fillOrder_alternativeSeat_header>div {
		font-size: 26px;
		color: #a8a8a8;
	}
	
	.fillOrder_alternativeSeat_tip {
		background-color: #ffd0bb;
		width: 100%;
		box-sizing: border-box;
		padding: 22px 50px;
		font-size: 24px;
		color: #fb6523;
		line-height: 36px;
	}
	
	.fillOrder_alternativeSeat_content {
		width: 100%;
		box-sizing: border-box;
		padding: 30px 50px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: flex-start;
		font-size: 28px;
	}
	
	.fillOrder_alternativeSeat_content>div {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 70px;
		width: 45%;
		color: #333333;
	}
	
	.fillOrder_alternativeSeat_content>div.active {
		color: #3bc3c2;
	}
	
	.fillOrder_alternativeSeat_content>div>img {
		width: 32px;
		height: 32px;
	}
	
	.fillOrder_message_content_tip {
		/*截止日期提示*/
		font-size: 22px;
		margin-left: 10px;
	}
	/*抢票提示*/
	
	.fillOrder_robTicket_tip {
		height: 70px;
		font-size: 22px;
		color: #303030;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.fillOrder_robTicket_tip>span {
		color: #f31419;
	}
	/*抢票滑动部分*/
	
	.fillOrder_robTicketSpeedUp {
		background-color: #fff;
		width: 100%;
		transition: all 0.5s;
	}
	
	.fillOrder_robTicketSpeedUp_tip {
		padding: 20px;
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		font-size: 24px;
		color: #a8a8a8;
		line-height: 30px;
	}
	
	.fillOrder_robTicketSpeedUp_tip span {
		color: #ff953f;
	}
	
	.fillOrder_robTicketSpeedUp_change {
		width: 100%;
		padding: 42px 12px 26px;
		box-sizing: border-box;
		border-top: 2px solid #f4f5f9;
		border-bottom: 2px solid #f4f5f9;
	}
	
	.fillOrder_robTicketSpeedUp_message {
		display: flex;
		justify-content: space-between;
		font-size: 26px;
		color: #333333;
		margin-top: 26px;
	}
	
	.fillOrder_robTicketSpeedUp_message span {
		color: #ff953f;
	}
	
	.fillOrder_robTicketSpeedUp_message_content {
		display: flex;
		justify-content: flex-start;
	}
	
	.fillOrder_robTicketSpeedUp_message_content>span {
		margin-left: 19px;
	}
	
	.fillOrder_robTicketSpeedUp_line {
		width: 687px;
		height: 6px;
		background-color: #e0e1e7;
		border-radius: 3px;
		position: relative;
		top: 0;
		left: 0;
	}
	
	.fillOrder_robTicketSpeedUp_line_child {
		height: 100%;
		border-radius: 3px;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #ff953f;
		transition: all 0.2s;
	}
	
	.fillOrder_robTicketSpeedUp_line>.fillOrder_robTicketSpeedUp_pic {
		width: 80px;
		height: 120px;
		transform: translate(-40px, -60px);
		position: absolute;
		top: 0;
		transition: all 0.2s;
	}
	
	.fillOrder_robTicketSpeedUp_pic>img {
		width: 100%;
		height: 100%;
	}
	
	.fillOrder_robTicketSpeedUp_content {
		display: flex;
		justify-content: space-between;
		font-size: 24px;
		color: #c8c8c8;
	}
	
	.fillOrder_robTicketSpeedUp_content>div>p {
		height: 10px;
		width: 2px;
		background: #cfcfcf;
		margin: 8px 0 4px;
	}
	
	.fillOrder_robTicketSpeedUp_content>div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
	
	.fillOrder_robTicketSpeedUp_content>div.left {
		margin-left: 12px;
	}
	
	.fillOrder_robTicketSpeedUp_content>div.right {
		margin-right: 12px;
	}
	
	.fillOrder_robTicketSpeedUp_content>div.active {
		color: #333;
	}
	
	.fillOrder_robTicketSpeedUp_content>div.start {
		align-items: flex-start;
	}
	
	.fillOrder_robTicketSpeedUp_content>div.end {
		align-items: flex-end;
	}
	
	.fillOrder_redEnvelope_tip {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 500;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.fillOrder_redEnvelope_tip > div {
		width: 80%;
		background: #fff;
		border-radius: 10px;
		color: #000;
	}
	
	.fillOrder_redEnvelope_title {
		margin-top: 38px;
		text-align: center;
		font-size: 32px;
		color: rgb(51, 51, 51);
	}
	
	.fillOrder_redEnvelope_text {
		margin-top: 36px;
		margin-bottom: 37px;
		padding: 0 45px;
		font-size: 28px;
		color: rgb(102, 102, 102);
		line-height: 60px;
	}
	
	.fillOrder_redEnvelope_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
	}
	
	.fillOrder_redEnvelope_btn > div {
		width: 200px;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30px;
		color: #3BC3C2;
		border:2px solid #3BC3C2;
		border-radius: 8px;
	}
	
	.fillOrder_insurance {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 350;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.fillOrder_insurance_box {
		width: 582px;
		height: 347px;
		background-color: #ffffff;
		border-radius: 25px;
		box-sizing: border-box;
		position: relative;
		top: 0;
		left: 0;
	}
	
	.fillOrder_insurance_pic {
		width: 100%;
		height: 127px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top:-50px;
	}
	
	.fillOrder_insurance_pic > img {
		width: 110px;
		height: 100%;
	}
	
	.fillOrder_insurance_tip {
		width: 100%;
		height: 263px;
		padding: 97px 0px 25px;
		text-align: center;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-bottom: 2px solid #d8d8d8;
		font-size: 24px;
		color: #a8a8a8;
	}
	
	.fillOrder_insurance_title {
		font-size: 30px;
		color: #333333;
	}
	
	.fillOrder_insurance_title > span {
		color: #ff4f36;
	}
	
	.fillOrder_insurance_btn {
		height: 85px;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	.fillOrder_insurance_btn > div {
		height: 100%;
		width: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 34px;
		color: #333333;
		border-right: 2px solid #d8d8d8;
	}
	
	.fillOrder_insurance_btn > div.active {
		border-right: 0;
		color: #ff4f36;
	}
</style>
<script>
	import trainlistdetails from "../../../components/trainListDetails"; //详情
	import trainHeader from "../../../components/trainHeader"; //头部
	import kpmask from "../../../components/kpmask"; //蒙层 //层级300
	import trainGetSeat from "../../../components/trainGetSeat"; //占座
	import trainChooseSeat from "./trainChooseSeat.js"; //选座处理
	import robTicketSpeedUpObj from "./trainRobTicketSpeedUp.js"; //抢票加速信息
	export default {
		name: "fillOrder",
		data() { //数据
			return {
				btnName: "预订须知", //右上角按钮
				msg: null, //车次信息
				departureDate: "", //日期
				seatMessage: null, //座位信息
				queryKey: "", //请求key
				surplusSeats:0,
				ticketType: 0, //车票详情 0普通 1抢票
				logInMessage: {}, //12306登录信息
				maskFlag: 0, //蒙层变量 1选座 2底部价格 3出票进度  4备选坐席弹框 5红包提示弹窗 6保险弹窗
				passengerList: [], //选中的乘客
				studentTicketFlag: false, //学生票售票日期区间
				phone: "", //联系电话
				isBottomShowFlag:true,//底部是否展示
				isBlackOnFlag: true, //是否为黑号
				coupon: { //优惠券
					list: [], //列表
					price: 0, //面值(选中以后)
					id: "", //Id
					name: "", //名称
					canUserNum:0,//可用优惠券数量
				},
				insurance: { //保险
					name: "",
					price: 0,
					highestPrice:0,
					id: "",
					list:[],//保险列表
				},
				insuranceFlag: 0, //保险开关（0关 1开）
				HCCashBackFlag:false,//返现开关
				chooseSeatFlag: false, //选座功能展示
				chooseSeatClass: { //选座渲染数据
					seatClassFirstRow: {}, //第一排
					seatClassFirstRowBei: {}, //第一排备份
					seatClassSecondRow: {}, //第二排
					seatClassSecondRowBei: {}, //第二排备份
					num: 0, //计数器
					flag: true, //是否需要获取选座信息
					seat: [], //选中的坐席
				},
				server: { //出行服务
					money: 0, //钱
					content: "", //名称
					setMealId: "", //Id
				},
				clear: {}, //清除函数
				priceObj: { //价格
					seatUnivalence: 0, //最终单价
					result: 0, //最终价格
					ticket: 0, //车票的价格
					total: 0, //总价
					orderPrice: 0, //车票价
					retrunMoney:0,//返现的实际价格
				},
				orderNum: "", //订单号
				alternative: { //备选
					train: [], //车次
					seat: { //坐席
						all: [], //所有备选坐席
						choose: [], //选中的
						backups: [], //备份的状态
						mainSeat: [], //主车次的剩余坐席
						maxPriceSeat: {}, //最大价位坐席
						maxPriceSeatBackups: {}, //最大价位坐席备份，防止取消
						mainSeatMessage: {}, //主坐席信息
						allSeat:[],//所有的坐席
					},
					date: [], //日期
				},
				maxTime: "", //最大截止日期（抢票）
				maxDepartTime: "", //最大发车时间
				minTime: "", //最小日期（抢票下单）
				robTicketPrice: 10, //抢票套餐费				
				robTicketSpeedUpShow: true, //抢票加速
				robTicketSpeedUpIndex: 0, //加速索引
				robTicketSpeedUpObj: [], //加速明细
				robTicketSpeedUpLineWidth: 0, //抢票滑动条的宽度
				robTicketSpeedUpStartX: 0, //触摸开始的位置
				isShowFlag: false,//页面是否展示
				studentFlag:false,//是否为学生票区间
				returnMoneyPassengerNum:0,//返现可适用人数
				redEnvelope:{ //红包
					switchFlag:false,//开关
					useMoney:"0.00",//红包使用的钱数
					canUseMoney:0,//可使用的最大钱数
					allMoney:0,//全部红包数
					tip:[],//使用提示
				}
			}
		},
		mounted() {
			var trainStore = this.$store.state.train.trainStore;
			if(trainStore.fillOrder) { ///页面切换
				var fillOrder = JSON.parse(JSON.stringify(trainStore.fillOrder));
				Object.keys(fillOrder).forEach(i => { //页面信息存储使用
					this[i] = fillOrder[i];
				}, this);
				this.price(); //价格函数执行
			} else { //首次进入
				this.trainNo = this.$route.query.trainNo; //车次
				this.fromStation = this.$route.query.fromStation; //车站
				this.toStation = this.$route.query.toStation;
				this.departureDate = this.$route.query.departureDate; //日期
				this.surplusSeats = this.$route.query.seats;//剩余票数
				this.studentFlag = Boolean(Number(this.$route.query.studentFlag)); //是否学生票
				this.getList(); //获取列表
				this.getTrainLogin(); //获取12306登录状态
				this.getRedPacket();//获取红包信息
				(this.$route.query.seatMessage) && (this.seatMessage = JSON.parse(this.$route.query.seatMessage)); //座位信息
				this.ticketType = Number(this.$route.query.ticketType); //车票详情 0普通 1抢票
				this.studentTicketFlag = this.getStudentTicketFlag(); //学生票售票日期区间
				if (trainStore.insuranceFlag) {
					this.insuranceFlag = Number(trainStore.insuranceFlag); //保险开关（0关 1开）
					this.HCCashBackFlag = Boolean(Number(trainStore.HCCashBackFlag)); //返现开关
					this.insuranceFlag && this.getInsuranceMessage();//获取保险信息
				} else {
					this.getInsurance();
				};
				this.btnName = this.ticketType ? "抢票须知" : "预订须知";
				this.priceObj.seatUnivalence = this.ticketType ? this.seatMessage.price : this.seatMessage.lowestPrice; //票的单价
			};
			this.ticketType && this.getMaxTime(); //获取截止日期
			this.phone = this.passengerList[0] ? (this.passengerList[0].phoneNo || this.$store.state.common.userinfo.phone) : this.$store.state.common.userinfo.phone; //联系电话
			this.getClear();//设置清除函数
		},
		created() {

		},
		watch: {
			robTicketSpeedUpIndex() { //抢票套餐单价
				this.robTicketPrice = this.robTicketSpeedUpObj[this.robTicketSpeedUpIndex].price;
			},
			msg() {
				this.chooseSeatFlag = this.judgeSeatFlag(this.seatMessage, this.msg); //获取选座服装展示
			},
		},
		methods: {
			getClear(){ //设置清除函数
				var clear = { //挂载重置函数
					chooseSeat(that) { //重置选座
						var seatName = that.seatMessage.seatName || that.seatMessage.cn;
						that.chooseSeatClass = JSON.parse(JSON.stringify(trainChooseSeat.filtrate(seatName))); //选座渲染数据
						that.chooseSeatClass.num = 0; //计数器归0
						that.chooseSeatClass.flag = false; //防止重复调用
						that.chooseSeatClass.seat = []; //选中的座位清空
					},
					coupon(that) { //重置优惠券
						that.coupon.name = "";
						that.coupon.price = 0;
						that.coupon.id = "";
					},
					insurance(that) { //重置保险
						that.insurance.name = "";
						that.insurance.price = 0;
						that.insurance.highestPrice = 0;
						that.insurance.id = "";
					}
				};
				this.clear = clear;
			},
			getRobGread(seatMessage){ //获取抢票等级
				this.robTicketSpeedUpIndex = (seatMessage.lowestPrice < 30) ? 0 : (seatMessage.lowestPrice < 250) ? 1 : (seatMessage.lowestPrice < 450) ? 2 : (seatMessage.lowestPrice < 550) ? 3 : 4; 
			},
			getList() { //获取信息列表
				this.$loading.show();
				var param = {
					fromStation: encodeURI(this.fromStation),
					toStation: encodeURI(this.toStation),
					ticketType: this.studentFlag ? 2 : 1, // 1正常票  2学生票  默认1
					trainDate: this.departureDate.replace(/-/g, ''),
				};
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/train", param).then((res) => {
					this.isShowFlag = true;
					if(res.data.Result.trains) {
						var list = res.data.Result.trains;
						var trainNo = this.trainNo;
						var middata = list.filter(function(elem) {
							return elem.trainNo == trainNo;
						});
						if(!middata.length) {
							this.$loading.hide();
							this.$toast("没有找到该车次", {
								durtaion: 200,
								location: 'center',
							});
							this.getDepartureDate(); //改日期
							return;
						};
						var ticketsArr = []; //处理座次排序
						for(var item in middata[0].tickets) { //获取座位信息
							let obj = middata[0].tickets[item];
							obj.seatClass = item; //添加坐席代号
							obj.trainNo = trainNo; //车次号
							this.alternative.seat.allSeat.push(obj);//备选坐席录入
							ticketsArr.push(obj);
						};
						ticketsArr.sort((a, b) => { //根据价格排序
							var a = a.lowestPrice || a.price;
							var b = b.lowestPrice || b.price;
							return b - a;
						});
						if(ticketsArr.length > 1) { //处理无座和硬座/二等座价格相同的情况
							var flag = (ticketsArr[ticketsArr.length - 1].seatName == "硬座" || ticketsArr[ticketsArr.length - 1].seatName == "二等座") && (ticketsArr[ticketsArr.length - 2].seatName == "无座");
							if(flag) {
								let obj = ticketsArr[ticketsArr.length - 2];
								ticketsArr[ticketsArr.length - 2] = ticketsArr[ticketsArr.length - 1];
								ticketsArr[ticketsArr.length - 1] = obj;
							};
						};
						middata[0].ticketsArr = ticketsArr;
						this.msg = middata[0];
						this.isBlackOn(); //获取黑号信息
						this.queryKey = res.data.Result.queryKey;
						this.getDepartureDate();
						if(this.ticketType) { //抢票
							this.maxDepartTime = new Date(this.msg.startDate.dateMsg).format('YYYY-MM-dd hh:mm'); //最晚发车时间
							this.getAlternativeSeat(); //抢票备选车次筛选
							this.minTime = this.msg.saleDateTime; //获取抢票日期
							this.robTicketSpeedUpObj = robTicketSpeedUpObj;
							this.getRobGread(this.seatMessage);//获取抢票等级
							this.getMaxTime();//获取截止日期
						} else { //普通
							this.getServer(); //普通单获取出行服务
						};
						var timer = setTimeout(function() {
							clearTimeout(timer);
							(this.ticketType) && (this.robTicketSpeedUpLineWidth = document.getElementById("robTicketSpeedUpLine").offsetWidth); //抢票获取滑动条的宽度	
						}.bind(this), 100);
						this.$loading.hide();
					} else {
						this.$loading.hide();
						this.getDepartureDate(); //改日期
						this.$toast("没有找到该车次", {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			getDepartureDate() { //处理时间信息
				this.msg.startDate = this.$publicMethod.getWeek(this.departureDate + " " + this.msg.fromTime);
				this.msg.endDate = this.$publicMethod.getWeek(new Date(this.msg.startDate.dateMsg.getTime() + (this.msg.runTimeSpan * 60 * 1000)).format("yyyy-MM-dd hh:mm:ss"));
				this.departureDateMsg = this.$publicMethod.getWeek(this.departureDate);
			},
			price(flag) { //计算价格函数  //操作红包金额时不修改使用红包数值
				this.priceObj.seatUnivalence = this.ticketType ? this.seatMessage.price : this.seatMessage.lowestPrice; //票的单价
				this.alternative.seat.maxPriceSeat.price && (this.priceObj.seatUnivalence = this.alternative.seat.maxPriceSeat.price); //抢票改写单价，可能为备选坐席的最高价
				var passengerNum = this.getPassengerNum(); //获取实际乘客数
				this.priceObj.retrunMoney = this.getRetrunMoney();//计算返现的实际价格
				var ticketPrice = passengerNum * this.priceObj.seatUnivalence; //获取车票价格
				this.redEnvelope.switchFlag && (flag || (this.redEnvelope.useMoney = this.redEnvelope.canUseMoney));//使用红包默认为最大值
				var totalPrice = ticketPrice; //总价初始值为车票价
				var resultPrice = ticketPrice - Number(this.coupon.price) - this.redEnvelope.useMoney; //减去优惠券和红包以后的钱
				var insurancePrice = Number(this.insurance.highestPrice) * this.passengerList.length; //保险
				(resultPrice < 0) && (resultPrice = 0);
				if(this.ticketType) { //抢票
					var robTicketPrice = this.robTicketSpeedUpObj[this.robTicketSpeedUpIndex].price * this.passengerList.length; //抢票套餐
					totalPrice = robTicketPrice + insurancePrice + totalPrice; //总价
					resultPrice = robTicketPrice + insurancePrice + resultPrice; //最终的钱
				} else { //普通
					var serverPrice = Number(this.server.money) * this.passengerList.length; //出行服务
					totalPrice = serverPrice + insurancePrice + totalPrice; //总价
					resultPrice = serverPrice + insurancePrice + resultPrice; //最终的钱
				};
				(resultPrice <= 0 && passengerNum) && (resultPrice = 0.01); //无保险出行服务，优惠券大于票价支付0.01
				this.priceObj.result = resultPrice; //实际支付价格
				this.priceObj.ticket = ticketPrice; //最终车票价格
				this.priceObj.total = totalPrice; //总价
				this.priceObj.orderPrice = passengerNum * this.priceObj.seatUnivalence; //车票价
				this.getCanUserCouponNum(this.priceObj.orderPrice);//计算可使用优惠券的数量
			},
			getPassengerNum() { //计算乘客的实际数量 （儿童学生半价 2个算一个实际乘客）
				var passengerNum = 0;
				var returnMoneyPassengerNum = 0;//返现可适用人数
//				this.ticketType ? (passengerNum = this.passengerList.length) : this.passengerList.forEach((val) => {
//					(val.passengerType == "2" || val.passengerType == "3") ? (passengerNum += 0.5) : (passengerNum++);
//				}, this); //抢票所有乘客都为1(不计儿童和学生)
				passengerNum = this.passengerList.length; //下单阶段所有乘客均为1
				this.passengerList.forEach((val) => { // 计算返现可适用人数
					(val.name == this.$store.state.common.userinfo.userName) && (returnMoneyPassengerNum++);
				}, this);
				this.returnMoneyPassengerNum = returnMoneyPassengerNum;//返现可适用人数
				return passengerNum;
			},
			getRetrunMoney(){ //计算返现的实际价格
				var retrunUnivalence = this.priceObj.seatUnivalence;//返现单价
				if (this.ticketType) { //抢票则单价将改写为最小单价
					var seatArr = [this.alternative.seat.mainSeatMessage.seatName];
					this.alternative.seat.choose.forEach((val)=>{
						seatArr.push(val.seatName);
					});
					this.alternative.seat.allSeat.forEach((val)=>{
						seatArr.includes(val.seatName) && (val.lowestPrice < retrunUnivalence) && (retrunUnivalence = val.lowestPrice);
					});
				};
				var canUseMoney = retrunUnivalence* this.getPassengerNum();
				this.redEnvelope.canUseMoney = ((canUseMoney*0.1 > this.redEnvelope.allMoney) ? this.redEnvelope.allMoney : canUseMoney*0.1).toFixed(2);//获得车票价计算可用红包
				retrunUnivalence = retrunUnivalence * this.returnMoneyPassengerNum;
				(this.returnMoneyPassengerNum == this.passengerList.length) && (retrunUnivalence = retrunUnivalence - this.redEnvelope.useMoney - this.coupon.price);
				return retrunUnivalence;
			},
			getCanUserCouponNum(price){ //获取可用优惠券的数量
				if(!this.isBlackOnFlag) {
					var canUserNum = 0;
					this.coupon.list.forEach((val)=>{
						(!val.couponLimit || (price >= val.couponLimit)) && canUserNum++;
					},this);
					this.coupon.canUserNum = canUserNum;
				};
			},
			getTrainLogin() { //获取12306的登录状态
				var param = this.$store.state.train.trainStorage.trainLogin ? JSON.parse(JSON.stringify(this.$store.state.train.trainStorage.trainLogin)) : null; //获取传参
				if(!param) return;
				param = param;
				param.loginModel = "2";
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/login", param).then((res) => {
					if(res.data.Code == "0") {
						if(res.data.Result.isLogin == 2) {
							res.data.Result.accountNo = param.accountNo;
							res.data.Result.accountPwd = param.accountPwd;
						};
						this.logInMessage = res.data.Result;
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					console.log(err);
				});
			},
			getPhoneFocus(){//获取焦点事件
				this.isBottomShowFlag = false;
			},
			getPhoneBlur(){//失去焦点事件
				this.isBottomShowFlag = true;
			},
			changeRedEnvelopeUseMoney(){ //修改红包金额
				var money = this.redEnvelope.useMoney;
				(Number(money) > this.redEnvelope.canUseMoney) && (money= this.redEnvelope.canUseMoney);
				(Number(money) < 0) && (money = 0);
				var x = String(money).indexOf('.') + 1;   //小数点的位置
				money = String(money).slice(0,x+2);//大于2位的截取
				this.redEnvelope.useMoney = money;
				this.price(true);//价格函数调用
			},
			isBlackOn() { //判断是否为黑号
				var param = {
					userID: this.$store.state.common.userinfo.userID,
				};
				this.$http.post(this.$baseUrl.baseurl + "kpcx/webPage/getUserPattern", param).then((res) => {
					if(res.data.Code == "0") {
						var pattern = res.data.Result.pattern;
						((pattern == 1) || (pattern == 6) || (pattern == 8)) && (this.isBlackOnFlag = false);
						this.isBlackOnFlag || this.getCoupon();
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					console.log(err);
				});
			},
			rightBtnEvent() { //右上角按钮
				this.$router.push({ //预订或抢票须知
					name: "reserve",
					query: {
						ticketType: this.ticketType,
					},
				});
			},
			getStudentTicketFlag() { //学生票售票日期区间
				var year = new Date(this.departureDate.replace(/-/g, '/')).getFullYear(); //今年
				var lastYear = year - 1; //去年
				var nextYear = year + 1; //明年
				return(this.$publicMethod.isDateBetween(this.departureDate, year + ".6.1", year + ".9.30")) || (this.$publicMethod.isDateBetween(this.departureDate, lastYear + ".12.1", year + ".3.31")) ||
					(this.$publicMethod.isDateBetween(this.departureDate, year + ".12.1", nextYear + ".3.31"));
			},
			addPassenger() { //添加乘客页
				this.$router.push({
					name: 'trainPassenger',
					query: {
						isLogin: (this.logInMessage.isLogin == '2') ? 1 : 0, //是否登录12306
						passengerList: JSON.stringify(this.passengerList), //乘客列表
						ticketType: this.ticketType, //车次情况
						studentTicketFlag: this.studentTicketFlag ? 1 : 0,
					},
				});
			},
			delPassenger(key) { //删除乘客
				var item = this.passengerList.splice(key, 1)[0];
				if(item.passengerType == "1") { //如果是成人，删除对应儿童
					var arr = [];
					this.passengerList.forEach((val) => {
						(val.contactsid == item.contactsid) || arr.push(val);
					});
					this.passengerList = arr;
				};
				var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore)); //防刷新
				trainStore.fillOrder.passengerList = JSON.parse(JSON.stringify(this.passengerList));
				this.$store.commit('TRAINSTORE', trainStore);
				this.clear.coupon(this); //重置优惠券
				this.clear.chooseSeat(this); //重置选座
//				this.clear.insurance(this); //重置保险
				this.price(); //价格函数执行
			},
			addChildren() { //添加儿童
				if(this.passengerList.length) {
					if(this.passengerList.length > 4) { //超过5人
						this.$toast("最多可以选择5位乘客", {
							durtaion: 500,
							location: 'center',
						});
					} else { //未超过
						var item = "";
						for(var i = 0; i < this.passengerList.length; i++) {
							if(this.passengerList[i].passengerType == "1") {
								item = this.passengerList[i];
								break;
							};
						};
						if(item) { //存在成人
							var child = JSON.parse(JSON.stringify(item)); //拷贝乘客给儿童
							child.passengerType = '2'; //改乘客类型
							this.passengerList.push(child); //乘客列表
							this.clear.chooseSeat(this); //重置选座;
							this.price(); //计算价格
							//防刷新
							var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore)); //防刷新
							trainStore.fillOrder.passengerList = JSON.parse(JSON.stringify(this.passengerList));
							this.$store.commit('TRAINSTORE', trainStore);
						} else { //不存在即都为学生
							this.$toast("学生不可以带儿童", {
								durtaion: 500,
								location: 'center',
							});
						};
					};
				} else { //没有乘客
					this.$toast("儿童不能单独出行为确保出行安全，儿童需有成人同行", {
						durtaion: 500,
						location: 'center',
					});
				};
			},
			changeRedPacketSwitch(){ //红包开关
				if (!this.redEnvelope.switchFlag && !this.passengerList.length) {
					this.$toast("请先添加乘客", {
						durtaion: 200,
						location: 'center',
					});
				} else {
					this.redEnvelope.switchFlag = !this.redEnvelope.switchFlag;
					this.redEnvelope.useMoney = this.redEnvelope.switchFlag ? this.redEnvelope.canUseMoney : 0;//修改使用红包的金额
					this.price();
				};
			},
			getRedPacket(){ //获取红包信息
				var param = {
					userID: this.$store.state.common.userinfo.userID,
					type: this.ticketType ? "7" : '3',
				};
				this.$http.post(this.$baseUrl.baseurl + "kpcx/appPersonalCenter/myRedEnvelope", param).then((res) => {
					if (res.data.Code == "0") {
						var redEnvelopeMoney = (res.data.Result.redEnvelopeMoney >= 0) ? res.data.Result.redEnvelopeMoney : 0;
						this.redEnvelope.allMoney = redEnvelopeMoney;
						this.redEnvelope.tip = res.data.Result.remExplain.split('；');
					} else {
						(this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						}));
					}
				}).catch((err) => {
					console.log(err);
				});
			},
			getCoupon() { //获取优惠券信息
				var param = {
					userID: this.$store.state.common.userinfo.userID,
					type: this.ticketType ? "7" : "3",
					cityId: this.msg.fromStation,
					"status": "1",
				};
				this.$http.post(this.$baseUrl.baseurl + "coupon/app/coupon/usableList", param).then((res) => {
					(res.data.Code == "0") ? (this.coupon.list = res.data.Result.myCouponList || [] , this.getCanUserCouponNum(0)) : (this.$toast(res.data.msg, {
						durtaion: 200,
						location: 'center',
					}));
				}).catch((err) => {
					console.log(err);
				});
			},
			couponSkip() { //优惠券跳转
				(this.passengerList.length) ? this.$router.push({
					name: 'trainCoupon',
					query: {
						price: this.priceObj.seatUnivalence * this.passengerList.length, //可用优惠券抵消的订单金额
						startCity: this.msg.fromStation, //城市
						couponId: this.coupon.id, //选中的优惠券id
						ticketType: this.ticketType, //车票的性质
					},
				}): this.$toast("请先添加乘客", {
					durtaion: 200,
					location: 'center',
				});
			},
			insuranceSkip() { //跳转行程保险
				this.$router.push({
					name: 'trainInsurance',
					query: {
						insuranceId: this.insurance.id, //选中的保险id
					},
				});
//				(this.passengerList.length) ? this.$router.push({
//					name: 'trainInsurance',
//					query: {
//						insuranceId: this.insurance.id, //选中的保险id
//					},
//				}): this.$toast("请先添加乘客", {
//					durtaion: 200,
//					location: 'center',
//				});
			},
			judgeSeatFlag(seat, train) { //判断选座服务是否展示
				var flag = true; //是否展示
				((seat.seatName || seat.cn).indexOf('座') < 0 && (seat.seatName || seat.cn).indexOf('无') > -1) && (flag = false);
				(train.trainClass != 'D' && train.trainClass != 'GD' && train.trainClass != 'C' && train.trainClass != 'G') && (flag = false);
				return flag;
			},
			chooseSeatMask() { //选座弹窗
				if(this.passengerList.length) { //确定数量和渲染数据
					if(this.chooseSeatClass.flag) { //首次
						this.clear.chooseSeat(this); //重置选座
					} else { //非首次 (需要备份)
						this.chooseSeatClass.seatClassFirstRowBei = JSON.parse(JSON.stringify(this.chooseSeatClass.seatClassFirstRow));
						this.chooseSeatClass.seatClassSecondRowBei = JSON.parse(JSON.stringify(this.chooseSeatClass.seatClassSecondRow));
					};
					this.maskFlag = 1; //选座展示
				} else {
					this.$toast("请先添加乘客", {
						durtaion: 200,
						location: 'center',
					});
				};
			},
			chooseSeatChange(item, flag) { //选座
				var obj = flag ? this.chooseSeatClass.seatClassSecondRow : this.chooseSeatClass.seatClassFirstRow;
				if((this.chooseSeatClass.num < this.passengerList.length) || (obj[item] == 2)) {
					obj[item] = (obj[item] == 1) ? 2 : 1;
					(obj[item] == 1) ? this.chooseSeatClass.num--: this.chooseSeatClass.num++;
				} else {
					this.$toast("选座数量不可超过乘客数", {
						durtaion: 200,
						location: 'center',
					});
				};
			},
			chooseSeat(flag) { //点击按钮
				if(flag) { //点击蒙层恢复原来
					this.chooseSeatClass.seatClassFirstRow = this.chooseSeatClass.seatClassFirstRowBei;
					this.chooseSeatClass.seatClassSecondRow = this.chooseSeatClass.seatClassSecondRowBei;
				} else { //点击按钮
					if(this.chooseSeatClass.num == this.passengerList.length) { //确定
						var seat = []; //选中的坐席
						Object.keys(this.chooseSeatClass.seatClassFirstRow).forEach(i => {
							(this.chooseSeatClass.seatClassFirstRow[i] == 2) && seat.push("1" + i)
						}, this);
						(this.passengerList.length > 1) && Object.keys(this.chooseSeatClass.seatClassSecondRow).forEach(i => { //页面信息存储使用
							(this.chooseSeatClass.seatClassSecondRow[i] == 2) && seat.push("2" + i)
						}, this);
						this.chooseSeatClass.seat = seat; //选中的坐席
					} else { //不选
						this.clear.chooseSeat(this); //重置选座
					};
				};
				this.maskFlag = 0; //关闭
			},
			maskClick() { //点击蒙层 //关闭备选坐席时调用函数
				(this.maskFlag == 4) ? this.alternativeSeatCancel(): (this.maskFlag = 0);
			},
			getServer() { //获取出行服务
				var param = {
					orderType: this.ticketType ? "7" : "3", //调用函数时已经判断订单为普通单
					amount: this.priceObj.seatUnivalence, //票价
				};
				this.$http.post(this.$baseUrl.baseurl + "coupon/app/coupon/couponSetMealList", param).then((res) => {
					if(res.data.Code == "0") {
//						var money = (this.priceObj.seatUnivalence <= 50) ? 10 : (this.priceObj.seatUnivalence > 300) ? 30 : 20; //计算保险价格
						var money = 0; //计算保险价格
						var server = null;
						res.data.Result.list.forEach((val) => {
							(val.setMealAmount == money) && (server = {
								money: val.setMealAmount, //钱
								content: val.setMealName, //名称
								setMealId: val.setMealId, //Id
							});
						});
						server || (server = {
							money: res.data.Result.list[0].setMealAmount, //钱
							content: res.data.Result.list[0].setMealName, //名称
							setMealId: res.data.Result.list[0].setMealId, //Id
						});
						this.server = server;
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
					//console.log(this.coupon.list);
				}).catch((err) => {
					//					this.$loading.hide();
					console.log(err);
				});
			},
			getMaxTime() { //获取截止日期
				if(!this.maxDepartTime) return;
				var startTime = new Date(this.maxDepartTime.replace(/-/g, '/')).getTime();
				this.maxTime = new Date(startTime - 3 * 60 * 60 * 1000).format('yyyy-MM-dd hh:mm');
			},
			eventServer() { //跳出行服务
				this.$router.push({
					name: 'trainServer',
					query: {
						id: this.server.setMealId,
						ticketType: this.ticketType,
						price: this.priceObj.seatUnivalence,
					},
				});
			},
			alternativeTrain() { //跳备选车次
				this.$router.push({
					name: 'trainAlternative',
					query: {
						formCity: this.msg.fromStation, //出发城市
						toCity: this.msg.toStation, //到达城市
						departureDate: this.departureDate, //日期
						trainNo: this.msg.trainNo, //车次号
					},
				});
			},
			alternativeDate() { //跳备选日期
				this.$router.push({
					name: 'trainDate',
					query: {
						departureDate: this.departureDate, //日期
						alternativeDate: JSON.parse(JSON.stringify(this.alternative.date)), //备选日期
						alternative: 1,
					},
				});
			},
			alternativeSeat() { //备选坐席
				this.alternative.seat.backups = JSON.parse(JSON.stringify(this.alternative.seat.all)); //备份坐席
				this.alternative.seat.maxPriceSeatBackups = this.alternative.seat.maxPriceSeat; //备份最大的钱
				this.maskFlag = 4;
			},
			changeRobTicketSpeed(index) { //改变抢票速度的点击
				this.robTicketSpeedUpIndex = index;
				this.price();
			},
			robTicketTouchStart(e) { //触摸开始
				this.robTicketSpeedUpStartX = e.touches[0].clientX; //触摸开始的位置
			},
			robTicketTouchMove(e) { //手指移动
				var currentX = e.touches[0].clientX; //获取滑动的位置
				var index = this.robTicketSpeedUpIndex; //获取当前的加速等级
				var width = this.robTicketSpeedUpLineWidth / 5.5;
				var dis = currentX - this.robTicketSpeedUpStartX; //距离差值
				if((dis > 0) && dis > width) {
					index++;
					(index > 4) && (index = 4);
					this.robTicketSpeedUpStartX = currentX;
				};
				if((dis < 0) && (dis) < -width) {
					index--;
					(index < 0) && (index = 0);
					this.robTicketSpeedUpStartX = currentX;
				};
				if(this.robTicketSpeedUpIndex != index) {
					this.robTicketSpeedUpIndex = index;
					this.price();
				};
			},
			alternativeSeatEvent(item) { //点击
				item.flag = !item.flag; //选中和反选
				let arr = []; //刷选最大票价
				this.alternative.seat.all.forEach((val) => {
					val.flag && arr.push(val);
				});
				arr.push(this.alternative.seat.mainSeatMessage); //主坐席放入
				let index = 0;
				arr.forEach((val, key) => {
					(key > 0) && ((arr[key].price > arr[index].price) && (index = key));
				});
				this.alternative.seat.maxPriceSeat = arr[index];
				this.$forceUpdate();
			},
			alternativeSeatCancel() { //备选坐席取消
				this.maskFlag = 0;
				this.alternative.seat.all = this.alternative.seat.backups; //换原坐席
				this.alternative.seat.maxPriceSeat = this.alternative.seat.maxPriceSeatBackups; //还原备份
			},
			alternativeSeatSubmit() { //备选坐席确认
				this.alternative.seat.choose.length = 0;
				this.alternative.seat.all.forEach((val) => { //筛选中
					val.flag && this.alternative.seat.choose.push(val);
				}, this);
				var seatChoose = JSON.parse(JSON.stringify(this.alternative.seat.choose)); //计算最大单价
				seatChoose.sort(function(a, b) {
					return b.price - a.price
				});
				this.clear.coupon(this); //重置优惠券
				this.price(); //执行价格
				this.maskFlag = 0;
			},
			getAlternativeSeat() { //备选坐席筛选
				var ticketsArr = [];
				this.msg.ticketsArr.forEach((val, key) => {
					var message = {
						seatName: val.seatName, //坐席名称
						price: val.price, //坐席价格
						code: val.seatClass, //英文code
						trainNo: this.msg.trainNo, //车次号
						lowestPrice:val.lowestPrice,//最小票价
					};
					(val.seatName != this.seatMessage.seatName) ? (ticketsArr.push(message)) : (this.alternative.seat.maxPriceSeat = message);
				}, this);
				this.alternative.seat.all = ticketsArr; //所有的
				this.alternative.seat.mainSeat = JSON.parse(JSON.stringify(ticketsArr)); //主车次的
				this.alternative.seat.mainSeatMessage = this.alternative.seat.maxPriceSeat; //主坐席
			},
			closeRedEnvelopeTip(){ //关闭红包提示
				this.maskFlag = 0;
			},
			priceDetail() { //价格明细
				this.maskFlag = (this.maskFlag == 2) ? 0 : 2;
			},
			getRecommendInsurance(){ //获取推荐保险
				var insurance = null;
				this.insurance.list.forEach((val)=>{
					(Number(val.highestPrice) == 10) && (insurance = val);
				});
				insurance || (insurance = this.insurance.list[0]);
				if (insurance) {
					this.insurance.name = insurance.name;//保险信息
					this.insurance.id = insurance.productId;
					this.insurance.price = insurance.price;
					this.insurance.highestPrice = insurance.highestPrice;
					this.maskFlag = 6;
				} else {
					this.checkTicket();
				};
			},
			submit() { //提交
				if(this.passengerList.length) { //有乘客
					if(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.phone)) { //判断填写的手机号
						this.ticketType ? this.authentication() : (this.insuranceFlag && !this.insurance.id) ? this.getRecommendInsurance() :this.checkTicket(); //抢票直接身份验证，普通检查余票
					} else {
						var str = "手机号格式错误";
						(this.phone === "") && (str = "请填写手机号");
						this.$toast(str, {
							durtaion: 200,
							location: 'center',
						});
					};
				} else {
					this.$toast("请先添加乘客", {
						durtaion: 200,
						location: 'center',
					});
				};
			},
			recommendInsurance(flag){ //推荐保险的确认取消
				flag ? this.price() : this.clear.insurance(this);//取消则重置保险
				this.maskFlag = 0;
				this.checkTicket();
			},
			checkTicket() { //检查余票
				if (this.passengerList.length > this.surplusSeats) { //余票校验
					this.$toast("余票不足无法预订", {
						durtaion: 200,
						location: 'center',
					});
					return;
				};
				this.$loading.show();
				var param = {
					queryKey: this.queryKey,
					seatClass: this.seatMessage.seatClass,
					fromStation: encodeURI(this.msg.fromStation),
					toStation: encodeURI(this.msg.toStation),
					trainDate: this.departureDate.replace(/-/g, ''),
					trainNo: this.msg.trainNo,
				};
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/trainTicketQuantity", param).then((res) => {
					this.$loading.hide();
					(res.data.Code == "0") ? (res.data.Result > 0) ? this.authentication(): this.$toast("已无余票", { //有票身份验证
						durtaion: 200,
						location: 'center',
					}) : this.$toast(res.data.msg, {
						durtaion: 200,
						location: 'center',
					});
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			authentication() { //身份验证
				this.$loading.show();
				var passengers = []; //乘客
				this.passengerList.forEach((item) => {
					var passenger = {};
					passenger.passengerName = encodeURI(item.name);
					passenger.passengerType = item.passengerType;
					passenger.cardType = item.kpcxcertnO[0].certType;
					passenger.cardNo = item.kpcxcertnO[0].certNo; //certNo
					passengers.push(passenger);
				});
				var param = {
					passengers,
				};
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/identityVerification", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") { //验证成功下单
						var arriveTime = new Date(this._data.msg.endDate.dateMsg).format('YYYY-MM-dd hh:mm'); //计算到达时间
						var passengers = []; //乘客信息
						var ticketModelFlag = true; //自购代购 true 自 false 代
						var messageFlag = true; //信息是否完善 bug乘客
						this.passengerList.forEach((item) => {
							item.bornDate = item.bornDate.replace(/年/g, '-'); //bug乘客
							item.bornDate = item.bornDate.replace(/月/g, '-');
							item.bornDate = item.bornDate.replace(/日/g, ' ');
							var passenger = {
								passengerName: encodeURI(item.name), //姓名
								passengerType: item.passengerType, //类型
								birthday: item.bornDate, //生日
								insureCount: (this.insurance.id === "") ? 0 : 1, //是否购买保险 1购买 0不购买
								insurePrice: this.insurance.highestPrice ? this.insurance.highestPrice : 0, //保险价格（insureCount为0时insurePrice为0）
								insurNo: this.insurance.id ? this.insurance.id : "", //保险ID（insureCount为0时为""）
								insureUnitPrice: this.insurance.price ? this.insurance.price : 0, //保险价格（insureCount为0时insurePrice为0）
								sex: item.sexCode, //性别 0女 1男
								seatClass: this.seatMessage.seatClass, //坐席类别
								seatClassName: encodeURI(this.seatMessage.seatName), //坐席类别名称
								ticketPrice: (this.priceObj.seatUnivalence).toFixed(1), //票面价
							};
							this.ticketType ? (passenger.idCardType = item.kpcxcertnO[0].certType) : (passenger.idType = item.kpcxcertnO[0].certType);
							this.ticketType ? (passenger.idCardNo = item.kpcxcertnO[0].certNo) : (passenger.idCard = item.kpcxcertnO[0].certNo);
							item.passengerTypeisno || (ticketModelFlag = false); //自购代购
							if(item.passengerType == "3") { //学生票传参
								var studentNo = ""; //学号
								item.kpcxcertnO.forEach((val) => {
									(val.certType == "101") && (studentNo = val.certNo);
								});
								//学生
								if(studentNo && item.schoolCode && item.provinceCode && item.eductionalSystem && item.admissionYear && item.preferenceFromStation && item.preferenceToStation) {
									passenger.studentNo = studentNo;
									passenger.schoolCode = item.schoolCode;
									passenger.provinceCode = item.provinceCode;
									passenger.eductionalSystem = item.eductionalSystem;
									passenger.admissionYear = item.admissionYear;
									passenger.preferenceFromStation = item.preferenceFromStation
									passenger.preferenceToStation = item.preferenceToStation;
								} else {
									this.$toast("请完善您的个人信息", {
										durtaion: 200,
										location: 'center',
									});
									messageFlag = false;
								};
							};
							passengers.push(passenger); //放入数组
						}, this);
						(this.logInMessage.isLogin != 2) && (ticketModelFlag = false);
						var param = { //下单公共参数
							isH5Version: 2,
							queryKey: this.queryKey, //请求key
							contactMobile: this.phone, //联系电话
							journeyType: "1", //乘车类型 1单程 2往返 （必填，暂时只支持1）
							fromStation: encodeURI(this.msg.fromStation), //出发车站中文
							toStation: encodeURI(this.msg.toStation), //到达车站中文
							fromStationCode: this.msg.fromStationCode, //出发车站中文拼音
							toStationCode: this.msg.toStationCode, //到达车站中文拼音
							isPost: 0, //是否需要邮寄（0：不需要，1：需要）（必填，isOnLine为0时，isPost必须为1）
							isOnLine: 1, //是否线上出票
							isProduction: '1', //分销占座信息推送地址环境设置0：测试环境 1：生产环境 无特殊需求请传1
							ticketModel: ticketModelFlag ? '1' : '0', //购票模式0：代购模式 1：自购模式 不传默认0
							accountNo: this.logInMessage.accountNo || "", //12306账号密码
							accountPwd: this.logInMessage.accountPwd || "",
							acceptNoSeat: Number(this.seatMessage.seatClass == "noseat"), //是否接受无座 0：不接受 1：接受
							contactInfo: { //联系人信息
								cellphone: this.$store.state.common.userinfo.phone,
								person: encodeURI(this.$store.state.common.userinfo.userName)
							},
							passengers, //乘客信息
							orderPrice: (this.priceObj.orderPrice).toFixed(1), //火车票的总金额（不包括保险、优惠之前）
							totalPrice: (this.priceObj.total).toFixed(1), //订单金额
							payMoney: (this.priceObj.result).toFixed(2), //实际支付金额
							userID: this.$store.state.common.userinfo.userID, //userId
							orderIscoupon: this.coupon.id ? 1 : 0, //是否用券 0未使用1使用
							userCouponid: this.coupon.id, //用户优惠券id
							arrivalTime: arriveTime, //到达该站时间
							trainDate: this.departureDate, //发车时间
							phone: this.phone, //联系电话
							redEnvelopeMoney: Number(this.redEnvelope.useMoney), //红包金额
							orderIsredenvelope: String(Number(this.redEnvelope.switchFlag)), //是否使用红包
							isCashBack: this.HCCashBackFlag ? "3" : "0", //是否返现 1返现 0不返现 2本人返现 3多车次抢票按最低价返现
							lowPrice_version: "1", //1:是最低价的版本 0或者空则不是当值为1时，价格校验按照最低价
							deviceID: "", //设备信息
							channels: 3, //h5	
							model: "", //机型
							os: "", //版本
							ip: "", //ip
						};
						(messageFlag) && (this.ticketType ? this.creatRob(param) : this.creatNomal(param));
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			creatRob(param) { //抢票单 接收公共参数
				var presellFlag = (this.msg.saleFlag == "2" || this.msg.saleFlag == "3"); //预售判断
				var trainNo = [...this.alternative.train]; //车次
				trainNo.unshift(this.msg.trainNo);
				var multiTicketTime = []; //备选日期
				this.alternative.date.forEach((val) => {
					multiTicketTime.push(val.dateStr);
				});
				var seatClassCode = []; //坐席 code
				var seatClass = []; //中文坐席
				this.alternative.seat.choose.forEach((val) => {
					seatClassCode.push(val.code);
					seatClass.push(val.seatName);
				});
				param.acceptNoSeat = Number(seatClassCode.includes("noseat"));
				param.multiSeatClassCode = seatClassCode.join("|"); //备选座席代号
				param.multiSeatClass = encodeURI(seatClass.join(",")); //备选中文坐席
				seatClassCode.unshift(this.alternative.seat.mainSeatMessage.code); //放入主车次
				seatClass.unshift(this.alternative.seat.mainSeatMessage.seatName); //放入主车次
				param.trainNo = trainNo.join("|"); //车次
				param.seatClassCode = seatClassCode.join("|"); //座席代号
				param.seatClass = encodeURI(seatClass.join("|")); //座席中文
				param.seatClassName = encodeURI(seatClass.join("|")); //座席中文
				param.multiTrainNo = this.alternative.train.join("|"); //备选车次
				param.mainTrainNo = this.msg.trainNo; //主车次
				param.mainSeatClass = this.alternative.seat.mainSeatMessage.code; //主坐席英文code
				param.mainSeatClassName = encodeURI(this.alternative.seat.mainSeatMessage.seatName); //主坐席中文
				param.mainSeat = encodeURI(this.alternative.seat.mainSeatMessage.seatName); //主坐席
				param.grabGrade = this.robTicketSpeedUpIndex + 1; //抢票等级
				param.multiTicketTime = multiTicketTime.join(","); //备选日期
				param.startTime = presellFlag ? this.minTime : ""; //预售传参，抢票开始时间
				param.orderType = "7"; //订单
				param.closeTime = this.maxTime; //抢票截止日期
				param.grabMoney = (this.robTicketPrice).toFixed(1); //抢票套餐费用
				param.speedIssueFee = "0.0"; //
				param.departDate = new Date(this.msg.startDate.dateMsg).format('YYYY-MM-dd hh:mm'), //从该站发车时间
				param.noticeType = 1; //占座和出票通知是否合并（0：占座出票不合并，1：合并占座出票[仅限非支付类合作的分销商]）
				param.isSpeedIssue = "0"; //是否极速出票 0：不需要 1：需要
				param.ticketPrice = (this.priceObj.seatUnivalence).toFixed(1); //票面价
				//				console.log(JSON.parse(JSON.stringify(param)));
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/saveOrders", param).then((res) => {
					this.$loading.hide();
					//					console.log(res.data);
					if(res.data.Code == "0" && res.data.Result != null) {
						this.$router.push({ //跳支付
							name: 'trainPay',
							query: {
								orderNum: res.data.Result.trainOrderDetailInfo.order_num, //订单号
								changedType: 0, //是否改签
								orderType: res.data.Result.trainOrderDetailInfo.order_type, //订单类型
							},
						});
					} else if(res.data.Code == "9000") { //token失效
						this.$router.push({
							name: 'login',
						});
					} else if(res.data.Code == "103") { //未实名
						this.$router.push({
							name: 'realName',
						});
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			creatNomal(param) { //普通单 接收公共参数
				param.trainNo = this.msg.trainNo; //车次号
				param.orderType = "3"; //订单
				param.isSpeedIssue = Number(this.server.money) ? '1' : '0'; //是否极速出票 0：不需要 1：需要
				param.setMealId = this.server.setMealId; //套餐Id
				param.speedIssueFee = (this.server.money * this.passengerList.length).toFixed(1);
				param.chooseSeats = this.chooseSeatClass.seat.join(""); //高铁选座
				param.departureTime = new Date(this.msg.startDate.dateMsg).format('YYYY-MM-dd hh:mm'); //从该站发车时间
				param.noticeType = 0; //占座和出票通知是否合并（0：占座出票不合并，1：合并占座出票[仅限非支付类合作的分销商]）
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/saveOrders", param).then((res) => {
					this.$loading.hide();
					//console.log(res.data);
					if(res.data.Code == "0" && res.data.Result != null) { //占座定时器	
						this.orderNum = res.data.Result.outOrderNo; //订单号
						this.maskFlag = 3;
					} else if(res.data.Code == "9000") { //token失效
						this.$router.push({
							name: 'login',
						});
					} else if(res.data.Code == "103") { //未实名
						this.$router.push({
							name: 'realName',
						});
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			getInsurance() { //获取保险开关
				this.$http.post(this.$baseUrl.baseurl + "kpcx/switch/getAllSwitch", {
					"switch": "All",
				}).then((res) => {
					var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
					trainStore.insuranceFlag = res.data.Result.activityInfo.Insure; //存到全局(0关1开)
					trainStore.HCCashBackFlag = res.data.Result.activityInfo.HCCashBack; //返现
					this.$store.commit('TRAINSTORE', trainStore); 
					this.HCCashBackFlag = Boolean(Number(res.data.Result.activityInfo.HCCashBack));
					this.insuranceFlag = Number(res.data.Result.activityInfo.Insure);
					this.insuranceFlag && this.getInsuranceMessage();//获取保险信息
				}).catch((err) => {
					console.log(err);
				});
			},
			getInsuranceMessage(){ //获取保险信息
				this.$loading.show();
				var param = {};
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/getInsurances51", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
				       this.insurance.list = res.data.Result.insList;
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
		},
		beforeRouteLeave(to, from, next) {
			(to.name == "trainOccupyingSeat" || to.name == "trainPay") && (this.maskFlag = 0);
			var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
			(to.name == "trainSeat") ? (trainStore.fillOrder = null) : (trainStore.fillOrder = this._data);
			this.$store.commit('TRAINSTORE', trainStore);
			next();
		},
		filters: {
			getNum(num) { //证件号加密
				(typeof num == "String") || (num = String(num));
				var length = num.length;
				var str = "";
				for(var i = 0; i < length - 2; i++) {
					str += "*"
				};
				return num.substring(0, 1) + str + num.substring(num.length - 1, num.length);
			},
			fix(num) { //保留2位
				return Number(num).toFixed(2);
			},
			getSeat(arr) { //座位数组转字符串
				return arr.join("、");
			},
			getDate(dateArr) { //备选日期
				var arr = [];
				dateArr.forEach((val) => {
					arr.push(val.dateStrMsg);
				});
				return arr.join("、");
			},
			getSeat(seatArr) { //备选坐席
				var arr = [];
				seatArr.forEach((val) => {
					arr.push(val.seatName);
				});
				return arr.join("、");
			},
			changeMaxTime(time) { //截止日期
				return new Date(time.replace(/-/g, '/')).format('MM月dd日hh:mm');
			},
			returnMoney(price){//返现
			    //该公式在价格为1.4时计算基本为0但由于保留一位小数所以在计算得0.09时也展示为0，因此判断为3.6时展示为0.1;
			    var money = (price / (20 + price / 50) * (Math.log(price) / Math.log(10))).toFixed(3);
			    money = money.substring(0,money.length-2);
			    (money.substring(money.length - 1) == 0) && (money = money.substring(0, money.length - 1));
			    money = + money;
			    (money > 30) && (money = 30); 
			    return money;
		  	},
		},
		components: {
			trainlistdetails,
			kpmask,
			trainHeader,
			trainGetSeat
		},
	};
</script>